<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head lang="en">
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<title>Borno Fundraising Charity Template</title>
	<!-- Framework CSS -->
	<link rel="stylesheet" href="assets/blueprint-css/screen.css" type="text/css" media="screen, projection">
	<link rel="stylesheet" href="assets/blueprint-css/print.css" type="text/css" media="print">
	<!--[if lt IE 8]><link rel="stylesheet" href="assets/blueprint-css/ie.css" type="text/css" media="screen, projection"><![endif]-->
	<link rel="stylesheet" href="assets/blueprint-css/plugins/fancy-type/screen.css" type="text/css" media="screen, projection">
	<style type="text/css" media="screen">
		p, table, hr, .box { margin-bottom:25px; }
		.box p { margin-bottom:10px; }
	</style>
</head>


<body>
	<div class="container">
	
		<h3 class="center alt">&ldquo;Borno Fundraising Charity Template&rdquo; Documentation by &ldquo;TheWebLab&rdquo; v1.0</h3>
		
		<hr>
		
		<h1 class="center">&ldquo;Borno Fundraising Charity Template&rdquo; - shared on weidea.net</h1>
		
		<div class="borderTop">
			<div class="span-6 colborder info prepend-1">
				<p class="prepend-top">
					<strong>
					Created: 05/04/2014<br>
					By: Enayet Husain Rajib<br>
					Email: <a href="mailto:eh.rajib@gmail.com">eh.rajib@gmail.com</a>
					</strong>
				</p>
			</div><!-- end div .span-6 -->		
	
			<div class="span-12 last">
				<p class="prepend-top append-0">Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form <a href="http://themeforest.net/user/theweblab">here</a>. Thanks so much!</p>
			</div>
		</div><!-- end div .borderTop -->
		
		<hr>
		
		<h2 id="toc" class="alt">Table of Contents</h2>
		<ol class="alpha">
			<li><a href="#htmlStructure">HTML Structure</a></li>
			<li><a href="#cssFiles">CSS Files and Structure</a></li>
			<li><a href="#javascript">JavaScript</a></li>
			<li><a href="#paypal">Paypal Donate Button</a></li>
			<li><a href="#mailchimp">Mailchimp Subscription</a></li>
			<li><a href="#contact">Contact Form</a></li>
			<li><a href="#credits">Sources and Credits</a></li>
			

			
		</ol>
		
		<hr>
		
		<h3 id="htmlStructure"><strong>A) HTML Structure</strong> - <a href="#toc">top</a></h3>
		<p>This theme is a responsive layout based on twitter bootstrap 3.0. A single page template. The sections are:</p>
		
		<img src="assets/images/htmlstructure.jpg" alt="HTML Structure" />
		
		<p>You need to add/edit content within the above divs.</p>

<pre>	a {
		color: #someColor;
	} 
</pre>

		<p>If you find that your new/custom style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight.</p>

		<p>I.E.</p>

<pre>	.third a {
		color: #someColor;
	}
</pre>

		<p>So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.</p> 

		<hr>

		<h3 id="cssFiles"><strong>B) CSS Files and Structure</strong> - <a href="#toc">top</a></h3>

		<p>I'm using mainly one CSS files in this theme.</p> 

		<p>The file contains all of the specific stylings for the page. The file is separated into sections using:</p>  

<pre>	
/*

Borno Fundraising Charity Template


Table of content:

1. Google font
2. General/body
3. Menu
4. Intro
5. Helping children to educate
6. Stories	
7. How can you help
	7.1 price table
8. Recent activities
9. Team	
10. Subscribe
11. Image gallery
12. Contact with us
13. Social-icons
14. Footer
15. Animation effect
16. Custom media query

*/
</pre>
		
		<p>If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.</p> 

		<p>There are some extra css files for adding different color schema and google fonts as shown in the <a href="http://thethemelab.com/envato/Borno/" target="_blank">demo</a>.
	
		<pre>
		<!-- color schema -->
		&lt link href="css/color-4.css" rel="stylesheet" id="layoutstyle" &gt

		<!-- google font for title -->
		&lt link href="css/google-font.css" rel="stylesheet" id="googlefont" &gt
		</pre>
		
		You can replace <b>color-4.css</b> with other files available under <b>css</b> directory.
		Alternatively you can edit <b>color-4.css</b> with your own custom style and font.
		</p> 

		
		<hr>
		
		<h3 id="javascript"><strong>C) JavaScript</strong> - <a href="#toc">top</a></h3>
		
		<p>This theme imports three Javascript files.</p>
		
		<ol>
			<li>jQuery</li>
			<li>My custom scripts</li>
			<li>Plugin</li>
		</ol>
		  
		<ol>
			<li>jQuery is a Javascript library that greatly reduces the amount of code that you must write.</li>
			<li>Most of the animation in this site is carried out from the customs scripts and css3. The custom javascript is inlcuded at the bottom of the html page.
			</li>
			<li>In addition to the custom scripts, I implement a few "tried and true" plugins to create the effects. This plugin is packed, so you won't need to manually edit anything in the file. The only necessary thing to know is how to call the method.
				<p>
				<ol>
					<li>The onscroll animation (for one time) with <b>lib/jquery.appear/jquery.appear.js</b></li>
					<li>The parallax effect with <b>lib/jquery-parallax/scripts/jquery.parallax-1.1.3.js</b></li>
					<li>The number animation with <b>js/jquery.animateNumbers.js</b></li>
					<li>jQuery-One-Page-Nav <b>lib/jQuery-One-Page-Nav/jquery.scrollTo.js</b> and <b>lib/jQuery-One-Page-Nav/jquery.nav.js</b></li>
					<li>Animations for Thumbnail Grids <b>lib/ThumbnailGridAnimations/js/thumbnailGridEffects.js</b></li>
				</ol>
				</p>
			</li>
		</ol>
		
		<hr>
		
		<h3 id="paypal"><strong>E) Paypal Donate Button</strong> - <a href="#toc">top</a></h3>		
		
		There is two paypal donation button.
		<ul>
			<li>i. In the top area.</li>
			<li>ii. How Can You Help?->Donate tab.</li>
		</ul>
		<pre>
			&lt input type="hidden" name="business" value="YOUR_PAYPAL_EMAIL_ADDRESS" &gt
		</pre>
		
		<p> 
		Replace YOUR_PAYPAL_EMAIL_ADDRESS with your paypal email address.
		</p> 
		
		
		<h3 id="mailchimp"><strong>F) Mailchimp Subscription</strong> - <a href="#toc">top</a></h3>	
		
		<p>Edit the "lib/mcapi-simple-subscribe-jquery/inc/store-address.php" file:</p>

		<pre>
		Line 24: replace "your_apikey" with an API Key retrieved from here:
			http://admin.mailchimp.com/account/api/
		</pre>
		
		<pre>
		Line 27: replace "my_list_unique_id" with the List Unique Id obtained by going to:
			http://admin.mailchimp.com/lists/
			
		Click the "settings" link for the list - the Unique Id is at the bottom of that page.		
		</pre>
		
		<hr>
		
		<h3 id="contact"><strong>F) Contact Form</strong> - <a href="#toc">top</a></h3>
		
		<p>Edit the "lib/ajax-html-contact-form/email.php" file:</p>

		<pre>
		Line 3: replace "YOUR_EMAIL_ADDRESS" with your email address.
		</pre>	
		
		
		<hr>
		<h3 id="credits"><strong>G) Sources and Credits</strong> - <a href="#toc">top</a></h3>
		
		<p>I've used the following images, icons or other files as listed.
		
		<ul>
			<li><a href="http://getbootstrap.com/">Bootstrap</a></li>
			<li><a href="http://fontawesome.io/">Font Awesome</a></li>
			<li><a href="https://github.com/bas2k/jquery.appear/">jQuery.appear</a></li>
			<li><a href="https://github.com/nicinabox/superslides">superslides</a></li>
			<li><a href="http://bxslider.com/">jquery.bxslider</a></li>
			<li><a href="https://github.com/davist11/jQuery-One-Page-Nav">jQuery-One-Page-Nav</a></li>
			<li><a href="https://github.com/IanLunn/jQuery-Parallax">Parallax effect</a></li>
			<li><a href="http://tympanus.net/codrops/2014/03/27/3d-grid-effect/">3D Grid Effect</a></li>
		</ul>
		
		<hr>
		
		<p>Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.</p> 
		
		<p class="append-bottom alt large"><strong>Enayet Husain Rajib</strong></p>
		<p><a href="#toc">Go To Table of Contents</a></p>
		
		<hr class="space">
	</div><!-- end div .container -->
</body>
</html>